<template>
  <div
    class="d-flex justify-space-between header align-center"
    :class="isDesktop ? 'pt-5 pr-10 pl-5 pb-9' : 'px-4 pt-1'"
  >
    <Link :href="`/home`" @click="toHome">
      <img class="logo" src="/images/logo.png" alt="Fantasi Logo" title="Fantasi Logo" />
    </Link>
    <div class="d-flex justify-center align-center">
      <slot></slot>
      <Link :href="`/home`" @click="toHome" class="d-flex">
        <Icon class="back pointer" size="28" name="return"></Icon>
      </Link>
    </div>
  </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useNavStore } from '@/store/nav'
import Link from '@/components/common/Link.vue'

const appStore = useAppStore()
const { isDesktop } = storeToRefs(appStore)

const navStore = useNavStore()
const { toHome } = navStore
</script>
<style lang="scss" scoped>
.header {
  position: fixed;
  height: 3.75rem;
  top: 0;
  width: 100%;
  background-color: rgb(var(--v-theme-background));
  z-index: 1;
  & .logo {
    height: 1.1875rem;
    margin-right: 0.1875rem;
  }
}
</style>
